﻿<%@ Page Language="c#" CodeFile="~/Default.aspx.cs" Inherits="TallComponents.Web.WebForm1" %>
<%@ Register TagPrefix="tc" Namespace="TallComponents.Web" Assembly="App_Code" %>
<%@ Register TagPrefix="tc" Namespace="TallComponents.Web.Pdf" Assembly="TallComponents.Web.PdfViewer" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head runat="server">
   <title>Upload & View Demo - PDFWebViewer.NET</title>
   <style type="text/css">
      body { font-family: Verdana, Arial, Helvetica, _sans; font-size: 12px; }
      img { border: 0px; }
      .thumb { display: block; margin: 0px; padding:0px; }
      .thumb img { border: solid 1px #999999; margin: 3px; }
      .thumb:hover img { border: solid 2px #66ff33; margin: 2px; }
      .active img { border: solid 2px black; margin: 2px; }
      a:active { outline: 0 none black; }
      .searchResult {border: solid 1px red; }
   </style>
   <link rel="Stylesheet" type="text/css" href="modal.css" />
</head>
<body>
   <form id="Form1" method="post" runat="server" enctype="multipart/form-data">
   <asp:ScriptManager ID="ScriptManager1" runat="server">
      <Scripts>
         <asp:ScriptReference Path="search.js" IgnoreScriptPath="true"  />
     </Scripts>
   </asp:ScriptManager>

   <script type="text/javascript">
      Sys.Application.add_load(function() {
         $find('Toolbar').add_buttonClick(function(sender, args) {
            if (args.command == 'open') {
               var modal = $find('Modal1').show(450, 300);
            } else if (args.command == 'close') {
               window.location.href = window.location.href;
            }
         });
      });
   </script>
   <tc:ModalDialog runat="server" ID="Modal1" Title="Upload a file">
   <p>
   <input type="file" size="50" name="pdf" />
   </p>
   <asp:Button runat="server" Text="Upload" ID="uploadPdf" OnClick="uploadPdf_Click" /> <input type="button" value="Cancel" onclick="$find('Modal1').hide(); return false;" />
   </tc:ModalDialog>
   <table cellpadding="0" cellspacing="2" style="width: auto;">
      <tr>
         <td style="border:1px solid #aaaaaa">
            <tc:PdfThumbnailsList ID="thumbnails" runat="server" PdfViewerControlId="pdfViewer" Width="160" Height="600" ServiceUrl="pageasimage.ashx" ThumbnailCssClass="thumb" SelectedThumbnailCssClass="active" />
         </td>
         <td valign="top" style="border:1px solid #aaaaaa">
            <tc:PdfViewerToolbar ID="Toolbar" runat="server" class="toolbar" PdfViewerControlId="pdfViewer" ShowFileButtons="true" />
            <tc:PdfViewer ID="pdfViewer" runat="server" Width="650" Height="576" ZoomFactor="0.75" ServiceUrl="pageasimage.ashx" SearchServiceUrl="search.ashx" SearchResultCssClass="searchResult" />
         </td>
         <td style="width:260px; padding-left: 10px;" valign="top">
         <h2>JavaScript interaction</h2>
   
   <fieldset>
      <legend>Full-text Searching</legend>
      <p>
      <asp:TextBox runat="server" ID="TextFind" Width="200px" /><br />
      <asp:CheckBox ID="checkMatchCase" runat="server" Text="Match case" /> <asp:CheckBox ID="checkMatchWord" runat="server" Text="Match whole word" /><br />
      <asp:Button runat="server" ID="buttonFind" Text="Find"/> <asp:Button runat="server" ID="buttonCancel" Text="Cancel" Enabled="false"/>
      </p>
      <p id="results"></p>
   </fieldset>
   <fieldset>
      <legend>Document information</legend>
      <p><input type="button" onclick="showDocInfo(); return false;" value="Show document info" /></p>
   </fieldset>
   <fieldset>
      <legend>Viewer control</legend>
      <p>Mode : <a href="#" onclick="$find('pdfViewer').set_cursorMode('zoomIn')">zoom in</a>  <a href="#" onclick="$find('pdfViewer').set_cursorMode('zoomOut')">zoom out</a> <a href="#" onclick="$find('pdfViewer').set_cursorMode('pan')">pan</a></p>
      <p>Scroll to : <a href="#" onclick="scrollTo('bottom')">bottom</a> <a href="#" onclick="scrollTo('top')">top</a> <a href="#" onclick="scrollTo('left')">left</a> <a href="#" onclick="scrollTo('right')">right</a></p>
      <p>Rotate page: <a href="#" onclick="rotate(0)">0</a> <a href="#" onclick="rotate(90)">90</a> <a href="#" onclick="rotate(180)">180</a> <a href="#" onclick="rotate(270)">270</a></p>
      <p>Resize viewer: <table><tr><th>Width</th><td><input type="text" maxlength="3" id="width" size="3" style="width:50px;" /></td></tr>
      <tr><th>Height</th><td><input type="text" id="height" maxlength="3" size="3" style="width:50px;"/></td></tr></table>
      <br /><a href="#" onclick="$find('pdfViewer').set_size({ width : document.getElementById('width').value, height : document.getElementById('height').value}); return false;">Resize</a></p>
   </fieldset>
         </td>
      </tr>
   </table>
   
   </form>
   <script type="text/javascript">
      function showDocInfo() {
         var viewer = $find('pdfViewer');
         if (viewer) {
            var doc = viewer.get_document();
            if (!doc.IsValid) {
               alert("No document loaded.");
            }
            else {
            alert(
               "Title: "+ doc.DocumentInfo.Title+
               "\nSubject: " + doc.DocumentInfo.Subject +
               "\nKeywords: " + doc.DocumentInfo.Keywords +
               "\nAuthor: " + doc.DocumentInfo.Author +
               "\nCreator: " + doc.DocumentInfo.Creator +
               "\n\nPages: " + doc.Pages.length);
            
            }
         }
      }
      function scrollTo(position) {
         var viewer = $find('pdfViewer');
         var pageIndex = viewer.get_pageIndex();
         var page = viewer.get_document().Pages[pageIndex];
         switch (position) {
            case 'bottom':
               viewer.goTo(pageIndex, null, { y: page.Height });
               break;
            case 'top':
               viewer.goTo(pageIndex, null, { y: 0 });
               break;
            case 'left':
               viewer.goTo(pageIndex, null, { x: 0 });
               break;
            case 'right':
               viewer.goTo(pageIndex, null, { x: page.Width });
               break;
         }
      }
      function rotate(rotation) {
         var viewer = $find('pdfViewer');
         viewer.rotate(rotation);
         return false;
      }
      Sys.Application.add_init(function() {
         var control = $find("pdfViewer");
         control.add_updated(function() {
            var size = control.get_size();
            document.getElementById('width').value = size.width;
            document.getElementById('height').value = size.height;
         });
      });
   </script>
</body>
</html>
